<template>
  <view class="personal-info-page">
    <!-- 头部导航 -->
    <myHeader title="个人资料" showBack />
    <!-- 资料列表 -->
    <view class="info-list-wrap">
      <view class="info-list">
        <view class="info-item" v-for="(item, index) in infoList" :key="index">
          <u-input
            v-model="userInfo[item.type]"
            :placeholder="item.label"
            suffixIcon="arrow-right"
            inputAlign="right"
			@confirm="updateUserInfo()"
          >
            <u-text
              :text="item.label"
              slot="prefix"
              margin="0 3rpx 0 0"
              size="30"
              color="#333"
              type="tips"
            ></u-text>
          </u-input>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {updateUser} from "@/api";
export default {
  data() {
    return {
      infoList: [
        { label: "昵称", value: "", type: "nickname" },
        { label: "简介", value: "", type: "mark" },
        { label: "擅长", value: "", type: "skilledIn" },
      ],
      userInfo: {},
    };
  },
  onLoad() {
    const userInfo = uni.getStorageSync("userInfo");
    this.userInfo = { ...userInfo };
  },
  methods: {
    // 列表项点击事件，可根据 type 做不同逻辑，比如跳转编辑页面
    handleItemClick(item) {
      uni.showToast({
        title: `点击了${item.label}，可跳转编辑页面`,
        icon: "none",
      });
      // 这里可扩展：根据 item.type 跳转到对应编辑页面，传递参数等
      // 示例：uni.navigateTo({ url: `/pages/edit/edit?type=${item.type}` });
    },
	async updateUserInfo(){
		const {id,nickname,mark,skilledIn} = this.userInfo
		const res = await updateUser({id,nickname,mark,skilledIn});
		if(res){
			uni.showToast({
				title: "修改成功",
				icon: "none",
			});
			uni.setStorageSync("userInfo",this.userInfo);
		}
	}
  },
};
</script>

<style lang="less" scoped>
.personal-info-page {
  background-color: rgba(19, 30, 50, 1);
  min-height: 100vh;
  color: #fff;
  // 资料列表样式
  .info-list-wrap {
    padding: 16rpx 32rpx;
  }
  .info-list {
    border-radius: 10rpx;
    overflow: hidden;
    .info-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;
      background-color: #fff;

      border-bottom: 1rpx solid rgba(243, 244, 246, 1);
      .item-label {
        font-size: 28rpx;
      }

      .item-value {
        font-size: 26rpx;
        color: #ccc;

        .empty {
          color: #999;
        }
      }

      .arrow-icon {
        width: 30rpx;
        height: 30rpx;
        color: #ccc;
      }
    }
  }
}
</style>